<template>
  <div class="recommendMV" @click="toWatch()">
    <img :src="imgUrl" v-on:mouseover="enterImg()" v-on:mouseout="leaveImg()" ref="img"/>
    <span class="tilte">{{ tilte }}</span>
    <span class="author">{{ author }}</span>
    <div class="playcount" v-show="playCount">
      <i class="iconfont icon-24gl-play"></i>
      <span>{{ count }}</span>
    </div>
    <div class="time">{{countTime}}</div>
  </div>
</template>

<script >
export default {
  name: "MvItem",
  props: ["imgUrl", "tilte", "authorList", "playCount", "id","preview","time"],
  data() {
    return {
      timer:null   //定时器
    }
  },
  computed: {
    // 播放量
    count() {
      if (this.playCount > 10000) {
        return Math.floor(this.playCount / 10000) + "万";
      } else {
        return this.playCount;
      }
    },
    //处理作者
    author() {
      if (this.authorList instanceof Array) {
        let authors = "";
        this.authorList.forEach((value) => {
          if (value.name) {
            authors += value.name;
            authors += "/";
          }
          if (value.userName) {
            authors += value.userName;
            authors += "/";
          }
        });
        return authors.slice(0, authors.length - 1);
      }else{
        if(this.authorList.nickname&&this.authorList.nickname!=null&&this.authorList.nickname!=undefined)
          return this.authorList.nickname;
        else return '';
      }
    },
    countTime(){
      if(this.time){
        let s = Math.floor(this.time%1000);
        let min = Math.floor(s/60);
        let second = Math.floor(s%60);
        min = min >= 10 ? min : '0'+min;
        second = second >= 10 ? second : '0'+second;
        return min + ':'+ second;
      }else{
        return ''
      }
    }
  },
  methods:{
    enterImg(){
      if(this.preview&&this.preview!=null&&this.preview!=undefined){
        this.$refs.img.src = this.preview;
        // 清除切换路由时  定时器仍存在  报错
        this.timer = setTimeout(() => {
          if(this.$refs.img) this.leaveImg();
        }, 4000); 
      }
    },
    leaveImg(){
      if(this.$refs.img.src!=this.imgUrl){
          this.timer = null;
          this.$refs.img.src = this.imgUrl;
      }
    },
    toWatch(){
      this.$router.push({
        name:'watch',
        query:{id:this.id}
      })
    }
  }
};
</script>

<style lang="less" scoped>
.recommendMV {
  width: 230px;
  height: 180px;
  cursor: pointer;
  position: relative;
  border-radius: 8px;
  img {
    width: 100%;
    height: 130px;
    border-radius: 8px;
  }
  span {
    font-size: 14px;
    margin: 0;
    display: block;
    font-weight: lighter;
    word-break: break-all;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
  .author {
    font-size: 12px;
  }
  .playcount {
    position: absolute;
    color: white;
    right: 7px;
    top: -3px;
    i {
      font-size: 10px;
    }
    span {
      font-size: 10px;
      display: inline;
    }
  }
}
.time{
  position: absolute;
  right: 10px;
  top: 110px;
  font-size: 12px;
  color: #fff;
}
</style>